<template>
  <div class="guide-container">
    <div v-if="loading" class="loading-container">
      <div class="cyber-loading">
        <div class="hexagon"></div>
        <div class="loading-text">系统加载中...</div>
      </div>
    </div>

    <div v-else class="guide-content">
      <!-- 系统标题 -->
      <div class="system-header cyber-border">
        <div class="system-title">
          <i class="el-icon-monitor"></i>
          <h1>智慧园区管理系统</h1>
        </div>
        <div class="system-version">
          <span class="version-tag">Version 2.0.1</span>
          <span class="update-time">最后更新：2024-03-15</span>
        </div>
      </div>

      <!-- 系统概述 -->
      <div class="system-overview cyber-border">
        <h2 class="cyber-title">系统概述</h2>
        <div class="overview-content">
          <p>智慧园区管理系统是一套面向现代化园区的综合管理平台，采用物联网技术、人工智能等先进技术，实现园区的智能化、数字化管理。</p>
        </div>
      </div>

      <!-- 核心功能模块 -->
      <div class="feature-grid">
        <div v-for="feature in features" 
             :key="feature.id" 
             class="feature-card cyber-border"
             :class="feature.type">
          <div class="feature-icon">
            <i :class="feature.icon"></i>
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
          <ul class="feature-list">
            <li v-for="(item, index) in feature.items" 
                :key="index">{{ item }}</li>
          </ul>
        </div>
      </div>

      <!-- 技术架构 -->
      <div class="tech-stack cyber-border">
        <h2 class="cyber-title">技术架构</h2>
        <div class="tech-layers">
          <div v-for="layer in techStack" 
               :key="layer.id" 
               class="tech-layer">
            <div class="layer-title">{{ layer.name }}</div>
            <div class="layer-items">
              <span v-for="item in layer.items" 
                    :key="item" 
                    class="tech-item">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 使用指南 -->
      <div class="usage-guide cyber-border">
        <h2 class="cyber-title">快速入门</h2>
        <div class="guide-steps">
          <div v-for="step in guideSteps" 
               :key="step.id" 
               class="guide-step">
            <div class="step-number">{{ step.id }}</div>
            <div class="step-content">
              <h4>{{ step.title }}</h4>
              <p>{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(true)

const features = ref([
  {
    id: 1,
    title: '物业空间管理',
    type: 'primary',
    icon: 'el-icon-office-building',
    description: '智能化管理园区物理空间和设施设备',
    items: [
      '实时设备状态监控',
      '空间使用率分析',
      '设备健康管理',
      '预警信息处理'
    ]
  },
  {
    id: 2,
    title: '安防监控系统',
    type: 'warning',
    icon: 'el-icon-video-camera',
    description: '全方位保障园区安全',
    items: [
      '视频监控管理',
      '人脸识别系统',
      '访客管理系统',
      '紧急事件处理'
    ]
  },
  {
    id: 3,
    title: '能源管理中心',
    type: 'success',
    icon: 'el-icon-lightning',
    description: '智能化能源监控与管理',
    items: [
      '能耗数据分析',
      '智能电表管理',
      '节能策略优化',
      '能源成本控制'
    ]
  },
  {
    id: 4,
    title: '智慧停车系统',
    type: 'info',
    icon: 'el-icon-truck',
    description: '高效车辆管理解决方案',
    items: [
      '车位实时监控',
      '车牌识别系统',
      '停车费用管理',
      '车位导航服务'
    ]
  }
])

const techStack = ref([
  {
    id: 1,
    name: '前端层',
    items: ['Vue 3', 'Element Plus', 'ECharts', 'WebSocket']
  },
  {
    id: 2,
    name: '服务层',
    items: ['Spring Cloud', 'Node.js', 'Redis', 'RabbitMQ']
  },
  {
    id: 3,
    name: '数据层',
    items: ['MySQL', 'MongoDB', 'ElasticSearch', 'TimescaleDB']
  },
  {
    id: 4,
    name: '基础设施',
    items: ['Docker', 'Kubernetes', 'Nginx', 'Linux']
  }
])

const guideSteps = ref([
  {
    id: '01',
    title: '系统登录',
    description: '使用管理员分配的账号密码登录系统'
  },
  {
    id: '02',
    title: '功能导航',
    description: '通过左侧菜单栏访问各个功能模块'
  },
  {
    id: '03',
    title: '实时监控',
    description: '查看设备状态和告警信息'
  },
  {
    id: '04',
    title: '数据分析',
    description: '使用统计报表了解系统运行状况'
  }
])

onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
</script>

<style lang="scss" scoped>
.guide-container {
  padding: 20px;
  min-height: 100vh;
  background-color: #0a1929;
  color: #4cc9f0;
}

.guide-content {
  max-width: 1400px;
  margin: 0 auto;
}

.cyber-border {
  background: rgba(13, 25, 48, 0.8);
  border: 1px solid rgba(76, 201, 240, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.system-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .system-title {
    display: flex;
    align-items: center;
    gap: 15px;
    
    i {
      font-size: 2.5em;
      color: #4cc9f0;
      text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
    }
    
    h1 {
      margin: 0;
      font-size: 2em;
      color: #4cc9f0;
      text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
    }
  }
  
  .system-version {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    
    .version-tag {
      background: rgba(76, 201, 240, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.9em;
    }
    
    .update-time {
      color: #90caf9;
      font-size: 0.8em;
    }
  }
}

.cyber-title {
  color: #4cc9f0;
  font-size: 1.5em;
  margin: 0 0 20px 0;
  text-shadow: 0 0 8px rgba(76, 201, 240, 0.5);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.feature-card {
  padding: 20px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(76, 201, 240, 0.2);
  }
  
  .feature-icon {
    font-size: 2em;
    margin-bottom: 15px;
    color: #4cc9f0;
  }
  
  h3 {
    color: #4cc9f0;
    margin: 0 0 10px 0;
  }
  
  p {
    color: #90caf9;
    margin-bottom: 15px;
  }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      color: #90caf9;
      margin-bottom: 8px;
      padding-left: 20px;
      position: relative;
      
      &:before {
        content: '•';
        position: absolute;
        left: 0;
        color: #4cc9f0;
      }
    }
  }
}

.tech-layers {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.tech-layer {
  background: rgba(76, 201, 240, 0.1);
  border-radius: 8px;
  padding: 15px;
  
  .layer-title {
    color: #4cc9f0;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .layer-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .tech-item {
      background: rgba(76, 201, 240, 0.2);
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 0.9em;
    }
  }
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  
  .step-number {
    background: rgba(76, 201, 240, 0.1);
    color: #4cc9f0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 1px solid rgba(76, 201, 240, 0.3);
  }
  
  .step-content {
    flex: 1;
    
    h4 {
      color: #4cc9f0;
      margin: 0 0 5px 0;
    }
    
    p {
      color: #90caf9;
      margin: 0;
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .system-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    
    .system-version {
      align-items: center;
    }
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

// 加载动画样式
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 25, 41, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.cyber-loading {
  text-align: center;
  
  .hexagon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: conic-gradient(from 0deg, #4cc9f0, #90caf9, #64b5f6, #4cc9f0);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: rotate 2s linear infinite;
  }
  
  .loading-text {
    margin-top: 20px;
    color: #4cc9f0;
    font-size: 1.2em;
    text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 